<template>
  <div class="insView">
    <HeaderView />
    <div class="insMain" ref="inMain">
      <div class="content">
        <div class="updown">
          <div v-show="isUpDown">下拉刷新</div>
          <div v-show="!isUpDown">
            <div v-show="isLoad">数据加载中...</div>
            <div v-show="!isLoad">数据请求成功</div>
           </div>
        </div>

        <div class="insItem"  v-for="item in insList" :key="item.id">
          <NewestItem :itemObj=item />
        </div>
        <div class="more">
          <div v-show="!ismore">没有数据了</div>
          <div v-show="ismore">数据加载中...</div>
        </div>
      </div>
    </div>

    <TabBar />
  </div>
</template>

<script>
import BScroll from '@better-scroll/core'
import PullUp from '@better-scroll/pull-up'

import PullDown from '@better-scroll/pull-down'

import HeaderView from '@/components/HeaderView'
import TabBar from '@/components/tabBar/TabBar'
import NewestItem from '@/components/NewestItem'

import { getInsFun } from '@/network/innerAxios'
BScroll.use(PullUp)
BScroll.use(PullDown)

export default {
  data () {
    return {
      isUpDown: true,
      isLoad: true,
      ismore: false,
      insList: [],
      resData: [],
      bscroll: null,
      page: 1
    }
  },
  components: {
    HeaderView,
    TabBar,
    NewestItem
  },
  async mounted () {
    await this.getIns()
    this.initBscroll()
  },
  methods: {
    // 获取数据
    async getIns () {
      await getInsFun(this.page).then(res => {
        const oldList = this.insList
        const newList = oldList.concat(res.data)
        this.insList = newList
        this.resData = res.data
      })
    },
    // 初始化bscroll
    initBscroll () {
      this.bscroll = new BScroll(this.$refs.inMain, {
        pullUpLoad: true,
        //  开启下拉刷新
        pullDownRefresh: true,
        click: true
      })
      this.bscroll.on('pullingUp', this.pullUpFun)
      this.bscroll.on('pullingDown', this.pullDownFun)
    },
    // 下拉触底
    async  pullUpFun () {
      this.ismore = true
      if (!this.resData.length) {
        this.ismore = false
        // 结束下拉触底
        this.bscroll.finishPullUp()
        return
      }
      this.page++
      await this.getIns()
      this.bscroll.finishPullUp()
      this.bscroll.refresh()
    },
    // 上拉刷新
    async pullDownFun () {
      this.isUpDown = false
      setTimeout(async () => {
        this.page = 1
        this.insList = []
        await this.getIns()
        this.isLoad = false
        setTimeout(() => {
        //  结束上拉
          this.bscroll.finishPullDown()
          this.isUpDown = true
          this.isLoad = true
        }, 2000)
      }, 1000)
      this.bscroll.refresh()
    }
  }
}
</script>

<style lang="less" scoped>
.insMain{
  padding: 0 0.2rem;
  height: calc(100vh - 2rem);
  overflow: hidden;
  .content{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .insItem{
      width: 48%;
      padding-top: 0.1rem;
    }
    .more,.updown{
    font-size: 0.28rem;
    color: #ccc;
    line-height: 1rem;
    text-align: center;
    width: 100%;
    }
    .updown{
      position: absolute;
      width: 100%;
      top: 0;
      left: 0;
      transform: translateY(-100%);
    }
  }
}
</style>
